<template>
	<view>
		<!-- 小程序引流关注公众号 -->
		<official></official>
		<!-- 企业主页 -->
		<view class="">
			<!-- 详情 -->
			<!-- <u-sticky> -->
			<view class="company_cont bg-white p-2">
				<company-header v-if="companyData.user" :company-user="companyData.user" :isIcon="true" @ewmChange="ewmChange"></company-header>
				<!-- 光能杯评选投票 -->
				<view class="mt-2" v-if="gnbInfo.activity_status == 0">
					<view class="px-2 py-4 mb-05 rounded_15 position-relative text-center bg_main text-white" @click="goPages('/subPages/my/gnb_vote/apply')">
						<text class="font-weight-bold">2023光能杯报名开启</text>
						<text class="position-absolute right-0 bottom-0 font-sm p-1">查看详情</text>
					</view>
				</view>
				<view class="detail_tab mt-3 c_3 flex justify-around font_24_2">
					<text v-for="(item, tabIdx) of company_tabs" :key="tabIdx" @click="tabChange(tabIdx)">{{ item }}</text>
				</view>
			</view>
			<!-- </u-sticky> -->
			<!-- 企业介绍 -->
			<view class="company_detail bg-white p-2">
				<view v-if="!companyData.user.company_desc" class="p-2 mt-3" style="margin: auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无企业信息"></u-empty>
				</view>
				<view v-else>
					<title-view tit="企业介绍" :look="false"></title-view>
					<view class="desc my-2 font-sm c_9 flex justify-between align-center font_24_2" v-if="companyData.user.company_desc" style="z-index: 999;">
						<view class="desc_text">
							<view v-if="companyData.user.company_desc">{{ companyData.user.company_desc }}</view>
							<rich-text v-else :nodes="companyData.user.company_content"></rich-text>
						</view>
						<text class="text-right" @click="detailShow = true">更多></text>
						<u-modal
							:show="detailShow"
							title="企业详情"
							confirmText="关闭"
							closeOnClickOverlay
							@close="detailShow = false"
							@confirm="detailShow = false"
							style="z-index: 999;"
						>
							<view class="slot-content w-100">
								<scroll-view scroll-y="true">
									<view class="u-content" style="max-height: 700rpx;">
										<view v-if="!companyData.user.company_desc" class="p-2 mt-3">
											<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
										</view>
										<view class="text" v-else>
											<view v-if="companyData.user.company_desc">{{ companyData.user.company_desc }}</view>
											<rich-text v-else :nodes="companyData.user.company_content"></rich-text>
										</view>
									</view>
								</scroll-view>
							</view>
						</u-modal>
					</view>
				</view>
			</view>
			<!-- 宣传片 -->
			<view id="md1" class="company_detail bg-white p-2" style="margin-top: 14rpx" v-if="companyData.user.company_video">
				<!-- <title-view tit="宣传片" :look="false"></title-view> -->
				<view class="my-2 cideo_box">
					<video
						class="company_video"
						v-if="companyData.user.company_video"
						autoplay
						:src="companyData.user.company_video"
						:show-mute-btn="true"
						:muted="true"
						object-fit="cover"
					></video>
				</view>
			</view>
			<!-- 产品中心 -->
			<view id="md2" class="company_detail p-2 bg-white" style="margin-top: 14rpx" v-if="companyData.list.length > 0">
				<title-view tit="产品中心" @lookall="tabChange(1)"></title-view>
				<view v-if="companyData.list.length <= 0" class="p-2 mt-3" style="margin: auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无产品信息"></u-empty>
				</view>
				<view v-else class="mt-5">
					<!-- <scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont"> -->
					<product-list :list="companyData.list.slice(0, 6)" :btn-show="true" :margin-right="'15'" :exhibition-id="exhibitionId"></product-list>
					<!-- </scroll-view> -->
				</view>
			</view>
			<!-- 项目案例 -->
			<view id="md3" class="company_detail bg-white p-2" style="margin-top: 14rpx;" v-if="companyData.project_list.length > 0">
				<title-view tit="项目案例" @lookall="tabChange(2)"></title-view>
				<view v-if="companyData.project_list.length <= 0" class="p-2 mt-3" style="margin: auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无项目案例"></u-empty>
				</view>
				<view v-else class="case_cont">
					<view
						class="case_item flex justify-between py-3 w-100"
						v-for="projectItem of companyData.project_list"
						:key="projectItem.id"
						@click="goPages('./case_detail?id=' + projectItem.id)"
					>
						<view class="case_tit">
							<view class="h4 lh_42">{{ projectItem.title }}</view>
							<view class="c_9 pt font_24 text_hidden1" v-if="projectItem.address">项目地点：{{ projectItem.address }}</view>
							<view class="c_9 pt font_24" v-if="projectItem.capacity">装机容量：{{ projectItem.capacity }}</view>
						</view>
						<view class="img_box"><image :src="projectItem.thumb" mode="aspectFill" class="case_img"></image></view>
					</view>
				</view>
			</view>
			<!-- 荣誉资质 -->
			<view id="md4" class="company_detail bg-white p-2 honor_warp" v-if="companyData.honor_list.length > 0">
				<title-view tit="荣誉资质" @lookall="tabChange(3)"></title-view>
				<view v-if="companyData.honor_list.length <= 0" class="p-2 mt-3" style="margin: auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无荣誉资质"></u-empty>
				</view>
				<view class="flex flex-wrap justify-between my-2">
					<view class="honor_box" v-for="(honorItem, index) of companyData.honor_list" :key="honorItem.id">
						<image :src="honorItem.img_path" mode="aspectFill" class="honor_img" @click="previewImge(honorItem, index)"></image>
						<view class="h6 lh_42 my-1 text-center text_hidden1">{{ honorItem.title || '' }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="bottom_btn flex align-center" v-if="bottomShow">
			<text class="text-white text">在线约谈</text>
			<text class="text-white line">|</text>
			<text class="text-white text" @click="swapCard">{{ companyData.card_status == 1 ? '已交换' : '交换名片' }}</text>
			<text class="text-white line">|</text>
			<text class="text-white text" @click="concern">{{ companyData.user.is_click == 1 ? '已关注' : '关注企业' }}</text>
		</view> -->
			<!-- 选择名片弹窗 -->
			<!-- <card-popup v-if="circleShow" :circle-show.sync="circleShow" :is-cont="true" @goCreat="submitSwap"></card-popup> -->
			<!-- 企业二维码 -->
			<view style="padding-top: 100rpx;">
				<view class="bottom_btn flex align-center">
					<view class="text-white text flex align-center justify-center" @tap="downLoad(companyData.user)">
						<u-icon name="download" color="#fff" size="28"></u-icon>
						<text>资料下载</text>
					</view>
					<text class="text-white line">|</text>
					<view class="text-white text flex justify-center">
						<button class="bg_main text-white text flex align-center justify-center" open-type="share">
							<image class="ewr_img mr-1" src="@/static/img2/home/share.png" mode="" style="width: 40rpx;height: 40rpx;border: 0;"></image>
							<text>主页分享</text>
						</button>
					</view>
					<text class="text-white line" v-if="gnbInfo.activity_status == 0">|</text>
					<view class="text-white text flex justify-center" @click="goPages('./gnb_vote/vote')" v-if="gnbInfo.activity_status == 0"><text>光能杯评选</text></view>
				</view>
				<u-popup :show="ewmShow" @close="ewmShow = false" mode="center" :closeOnClickOverlay="true">
					<view class="py-3 px-5 m-auto text-center">
						<view class="font-weight-bold h5" style="max-width: 500rpx;">{{ companyData.user.company_name }}</view>
						<view class="p-3 flex justify-center">
							<image v-if="ewmImg" class="bigewm" :src="ewmImg" :alt="companyData.user.company_name" mode="" :show-menu-by-longpress="true"></image>
						</view>
						<button type="primary" size="small" class="savebtn bg_main font-small" @click="savePosterTap">保存至相册</button>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- 裁剪分享时图片的canvas -->
		<canvas canvas-id="canvas" style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;"></canvas>
	</view>
</template>

<script>
import { CompanyShow, likecollectionDzsc, clickOnMe, exchangeCardApply, selCircle, orcodeCode } from '@/api/home/company.js';
import { voteParticipate } from '@/api/my/gnb_apply.js';
import companyHeader from './header.vue';
import titleView from '@/components/titleView/title.vue';
import productList from '@/components/product_list/product_list.vue';
// import cardPopup from '@/components/card_popup.vue';
import download from '@/common/js/download.js';
import adview from '@/components/adview/adview.vue';
import official from '@/components/official/official.vue';
import util from '@/common/js/util.js';
export default {
	components: { titleView, productList, companyHeader, adview, official },
	data() {
		return {
			company_tabs: ['企业主页', '产品中心', '项目案例', '荣誉资质', '动态资讯'],
			babCurrent: 0,
			detailShow: false,
			toView: 'md1',
			//企业主页信息
			companyData: {
				user: null, //企业详情
				list: [], //产品中心
				project_list: [], //项目案例
				honor_list: [] //荣誉资质
			},
			// detailShow: false,
			circleShow: false, //交换名片弹窗
			exhibitionId: '', //展会id
			bottomShow: true,
			ewmShow: false,
			ewmImg: '',
			detailId: '',
			gnbInfo: {} //光能杯参评信息
		};
	},
	onShow() {
		// 重置企业主页产品对比选中状态
		uni.$emit('productPk');
	},
	onLoad(option) {
		// 获取企业信息
		this.exhibitionId = option.exhibitionId; //展会id
		this.detailId = option.id;
		let msg = {
			id: option.id,
			uid: uni.getStorageSync('userInfo').userId,
			token: uni.getStorageSync('userInfo').token || '',
			zhanhui_id: this.exhibitionId,
			code: option.code || 1
		};
		CompanyShow(msg).then(res => {
			if (res.code == 0) {
				this.companyData = res.data;
				if (uni.getStorageSync('userInfo').userId == this.companyData.id) {
					this.bottomShow = false;
				}
			} else {
				uni.$u.toast('获取企业主页信息失败');
			}
		});
		// 获取光能杯参评投票信息
		voteParticipate({ uid: uni.getStorageSync('userInfo').userId }).then(res => {
			if (res.code == 0) {
				this.gnbInfo = res.data;
			} else {
				console.log('光能杯', res.msg);
				// uni.$u.toast(res.msg);
			}
		});
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	//分享到聊天
	onShareAppMessage(res) {
		let shareMessage = {
			title: this.companyData.user.company_name,
			path: '/subPages/company_home/index?id=' + this.detailId + '&exhibitionId=' + this.exhibitionId,
			imageUrl: this.companyData.user.company_logo
		};
		return new Promise((resolve, reject) => {
			uni.showLoading({
				title: '请求分享数据中...',
				icon: 'none'
			});
			util.makeCanvas(shareMessage.imageUrl)
				.then(imgPath => {
					uni.hideLoading();
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: imgPath
					});
				})
				.catch(err => {
					// console.log('err', err);
					uni.hideLoading();
					resolve(shareMessage);
				});
		});
	},

	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.companyData.user.company_name,
			path: '/subPages/company_home/index?id=' + this.detailId + '&exhibitionId=' + this.exhibitionId, //界面路径
			imageUrl: this.companyData.user.company_logo
		};
	},
	methods: {
		// tab
		tabChange(idx) {
			this.babCurrent = idx;
			let mdTemp = '';
			switch (idx) {
				case 1:
					uni.navigateTo({ url: './product_center?companyId=' + this.companyData.user.id });
					break;
				case 2:
					uni.navigateTo({ url: './case?companyId=' + this.companyData.user.id });
					break;
				case 3:
					uni.navigateTo({ url: './honor?companyId=' + this.companyData.user.id });
					break;
				case 4:
					uni.navigateTo({ url: './info?companyId=' + this.companyData.user.id });
					break;
			}
		},
		// 荣誉资质图片预览
		previewImge(val, idx) {
			uni.previewImage({
				current: idx, //预览图片的下标
				urls: [val.img_path]
			});
		},
		// 交换名片
		swapCard() {
			// console.log('交换名片', uni.getStorageSync('userInfo').hasLogin);
			if (uni.getStorageSync('userInfo').hasLogin) {
				if (this.companyData.card_status == 1) {
					uni.$u.toast('您已与该企业交换过名片');
				} else {
					this.circleShow = true;
				}
			} else {
				this.circleShow = false;
				// 未登录
				this.toLogin();
			}
		},
		// 确认交换
		submitSwap(val) {
			// console.log(val);
			if (!val.card_id) {
				uni.$u.toast('请选择名片');
			} else if (!val.content) {
				uni.$u.toast('请输入验证消息');
			} else {
				selCircle({ company_id: uni.getStorageSync('userInfo').userId, zhanhui_id: this.exhibitionId })
					.then(event => {
						// console.log(event);
						if (event.code == 0) {
							let msg = {
								uid: this.companyData.user.id, //被申请人uid
								apply_card_id: event.card_id, //被申请人名片id
								token: uni.getStorageSync('userInfo').token || '', //申请人token
								exchange_id: val.card_id, //申请人选择的名片id
								content: val.content //'申请内容'
							};
							exchangeCardApply(msg).then(res => {
								console.log('提交申请', res);
								if (res.code == 0) {
									uni.$u.toast('已申请交换名片，请等待对方通过审核');
								} else {
									uni.$u.toast(res.msg);
								}
								this.circleShow = false;
							});
						} else {
							uni.$u.toast(event.msg);
						}
					})
					.catch(err => {
						console.log('获取企业名片失败', err);
					});
			}
		},
		// 关注企业
		concern() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				// 未登录
				this.toLogin();
			} else {
				if (this.companyData.user.is_click == 1) {
					uni.showModal({
						title: '提示',
						content: '确认要取消关注该企业吗？',
						success: res => {
							if (res.confirm) {
								this.attention();
							} else {
								return;
							}
						}
					});
				} else {
					this.attention();
				}
			}
		},
		attention() {
			let msg = {
				type: 'collection',
				id: this.companyData.id, //   企业id
				token: uni.getStorageSync('userInfo').token || '',
				article_type: 2
			};
			clickOnMe(msg)
				.then(res => {
					// console.log(res);
					this.companyData.user.is_click = this.companyData.user.is_click == 1 ? 0 : 1;
					uni.$u.toast(res.msg);
				})
				.catch(err => {
					console.log('关注企业失败', err);
				});
		},
		downLoad(val) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				// 未登录 登录后再跳回当前页面
				let msg = {
					title: 'companyDetail',
					id: this.detailId,
					exhibitionId: this.exhibitionId
				};
				uni.setStorageSync('loginToPage', msg);
				this.toLogin(); // 未登录
				return;
			}
			this.goPages('./download?companyUser=' + encodeURIComponent(JSON.stringify(val)) + '&exhibitionId=' + this.exhibitionId);
		},
		// 获取二维码
		ewmChange() {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
				return;
			}
			this.ewmImg = '';
			let msg = {
				type: 1,
				id: this.companyData.user.id,
				uid: uni.getStorageSync('userInfo').userId,
				zhanhui_id: this.exhibitionId,
				title: this.companyData.user.business_company
			};
			orcodeCode(msg).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.ewmImg = res.img;
					this.ewmShow = true;
				} else {
					uni.$u.toast('二维码生成失败');
				}
			});
		},
		// 保存图片到相册
		savePosterTap() {
			download.saveImage(this.ewmImg);
			setTimeout(() => {
				this.ewmShow = false;
				this.ewmImg = '';
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.company_cont {
	background-color: $color2;
	position: relative;
	z-index: 999;

	// padding-bottom: 50rpx;
	// margin-bottom: 60rpx;
	.detail_tab {
		border-bottom: 1px solid #989191;

		text:first-child {
			color: $color14;
			font-weight: bold;
			padding-bottom: 15rpx;
			border-bottom: 5rpx solid $color14;
			box-sizing: border-box;
		}
	}
}

.company_detail {
	.company_video {
		border-radius: 15rpx;
		width: 100%;
		height: 395rpx;
		z-index: 10;
	}

	.scroll_cont {
		white-space: nowrap;
		width: 100%;
		// padding: 20rpx 20rpx 20rpx 20rpx;
	}

	// 项目案例
	.case_cont {
		.case_item {
			border-bottom: 1px solid #c2c2c2;

			.case_tit {
				width: 70%;
			}

			.img_box {
				width: 40%;
				margin-left: 10rpx;

				.case_img {
					width: 264rpx;
					height: 173rpx;
					border-radius: 15rpx;
				}
			}
		}

		.case_item:last-child {
			border-bottom: 0;
		}
	}
}

// 荣誉资质
.honor_warp {
	width: 100%;
	margin-top: 14rpx;

	.honor_box {
		width: calc((100% / 2) - 10rpx);

		.honor_img {
			width: 100%;
			height: 220rpx;
			margin-bottom: 20rpx;
			border-radius: 15rpx;
		}
	}
}

// 底部按钮
.bottom_btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 98rpx;
	background-color: $color14;
	padding: 30rpx;
	border-radius: 20rpx 20rpx 0px 0px;
	font-size: 28rpx;
	text-align: center;
	z-index: 999;

	.text {
		flex-grow: 1;
		width: calc((100% / 2) - 20rpx);
	}

	.line {
		flex-grow: 0;
	}
}

::v-deep .u-modal {
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
	// opacity: 0.99;
}

.ewmwarp {
	width: 80rpx;
	height: 80rpx;
	border-top-left-radius: 100rpx;
	position: fixed;
	bottom: 0;
	right: 0;
	box-shadow: -2rpx -2rpx 12rpx rgba(243, 0, 0, 0.1);
}

.ewr_img {
	width: 50rpx;
	height: 50rpx;
	// margin-top: 20rpx;
	// margin-left: 20rpx;
}

.bigewm {
	width: 300rpx;
	height: 300rpx;
}

.savebtn {
	width: 200rpx;
	height: 50rpx;
}

.desc {
	width: 100%;

	.desc_text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		width: calc(100% - 100rpx);
	}

	.text-right {
		width: 100rpx;
	}
}
</style>
